<template>
  <header class="header-container">
      <!-- Logo区域 - 包含小红书Logo -->
      <div class="logo">
        <!-- 小红书Logo图片 - 使用相对路径引用assets中的图片 -->
        <!-- 注意：可以将真实的 xiaohongshu.png 放到 src/assets/ 文件夹替换此占位符 -->
        <img src="/src/assets/xiaohongshu.png" alt="小红书" class="logo-image" />
      </div>
 </header>
</template>

<script setup>
// JavaScript - 逻辑。
</script>

<style scoped>
/* CSS -- 控制样式 */
.header-container {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-image {
  height: 40px;
  width: auto;
}
</style>

